<template>
  <div class="task-info">
    <div class="task-header">
      <h5 class="task-title">任务详细</h5>
    </div>
    
    <div class="task-content">
      <div class="task-name">
        <el-row type="flex" justify="center">
          <span v-show="!editName">{{ props.taskName }}</span>
          <span v-show="editName">
            <el-input 
              v-model="props.taskName" 
              ref="reName" 
              :autofocus="true"
              @blur="handleNameBlur" 
              size="small"
              placeholder="请输入内容"
            ></el-input>
          </span>
          <el-button type="text" @click="handleRename">
            <i class="el-icon-edit-outline"></i>
          </el-button>
        </el-row>
      </div>
      
      <div class="task-info-list">
        <div 
          :class="'info'+(index+1)" 
          v-for="(item,index) in props.infoList" 
          :key="index"
        >
          <span class="topTxt">{{item[0]}}</span>
          <span class="txtContent">{{item[1]}}</span>
        </div>
      </div>
      
      <div class="task-actions">
        <el-row type="flex" justify="center" :gutter="10" style="margin-bottom: 4px">
          <el-button size="small" type="primary" @click="$emit('save-route')">
            保存任务
          </el-button>
        </el-row>
        <el-divider></el-divider>
      </div>
      
      <div class="task-settings">
        <div style="overflow:scroll;">
          <slot name="settings"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'

// 定义 props
const props = defineProps({
  taskName: {
    type: String,
    default: ''
  },
  infoList: {
    type: Array,
    default: () => [
      ['航线总长', '0.00 m'],
      ['巡检类型', '逐点巡检'],
      ['往返长度', '0.00 m'],
      ['用户航点', '0 个'],
      ['规划航点', '0 个'],
      ['预计时间', '0 s'],
    ]
  }
})

// 定义 emits
const emit = defineEmits(['save-route', 'name-changed'])

// 响应式数据
const editName = ref(false)
const reName = ref(null)

// 方法
const handleNameBlur = () => {
  editName.value = false
  emit('name-changed', props.taskName)
}

const handleRename = () => {
  if (editName.value) {
    editName.value = false
  } else {
    editName.value = true
    nextTick(() => {
      reName.value.focus()
    })
  }
}
</script>

<style lang="scss" scoped>
.task-info {
  height: 78vh;
  width: 360px;
  background-color: #0b022900;

  .task-content {
    height: 95%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 7px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      "task-name" 
      "task-info-list" 
      "task-info-list" 
      "task-actions" 
      "task-settings" 
      "task-settings" 
      "task-settings" 
      "task-settings" 
      "task-settings" 
      "task-settings" 
      "task-settings";
  }

  .task-settings {
    grid-area: task-settings;
    overflow-y: auto;
    overflow-x: visible;
    max-height: 450px;
  }

  .task-info-list {
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0px 0px;
    grid-template-areas:
      "info1 info2 info3" 
      "info4 info5 info6";
    grid-area: task-info-list;
    color: white;

    .info1, .info2, .info3, .info4, .info5, .info6 {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 0px 0px;
      grid-template-areas: "." ".";
    }

    .info1 { grid-area: info1; }
    .info2 { grid-area: info2; }
    .info3 { grid-area: info3; }
    .info4 { grid-area: info4; }
    .info5 { grid-area: info5; }
    .info6 { grid-area: info6; }
  }

  .task-name {
    grid-area: task-name;
    color: white;
  }

  .task-actions {
    grid-area: task-actions;
  }

  /* 设置滚动条的样式 */
  ::-webkit-scrollbar {
    width: 5px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #00d4ff;
  }
}
</style>
